<template>
  <div>
    <ul class="rebate_box" v-if="rebateGamelist">
      <li class="rebate_list" v-for="(item, index) in rebateGamelist" :key="index">
        <img :src="item.gameicon" alt="">
        <div class="rebate_content">
          <h3>{{item.gamename}}</h3>
          <span>最高返利{{item.max_rate}}%</span>
        </div>
        <div class="apply_btn_box">
          <van-button class="apply_btn" round>申请</van-button>
        </div>
      </li>
    </ul>
    <rebate-empty v-else/>
  </div>
</template>

<script>
import RebateEmpty from './RebateEmpty.vue'
  export default {
    components: {
      RebateEmpty,
    },
    data() {
      return {
        rebateGamelist: [],
      }
    },
    created () {
      this.getRebateGamelist()
    },
    methods: {
      getRebateGamelist() {
        this.axios.get('/rebate_gamelist.json', {}).then(res => {
          console.log(res.data);
          this.rebateGamelist = res.data.rebate_gamelist
        })
      }
    },
  }
</script>

<style lang="less" scoped>
.rebate_box {
  width: 9.146667rem;
  padding: .266667rem .426667rem;
  .rebate_list {
    width: 9.146667rem;
    height: 1.866667rem;
    box-sizing: border-box;
    padding: .266667rem;
    background: #fff;
    border-radius: .266667rem;
    margin-bottom: .133333rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 1.333333rem;
      height: 1.333333rem;
      margin-right: .266667rem;
    }
    .rebate_content {
      flex: 1;
      font-size: .32rem;
      h3 {
        font-size: .426667rem;
        font-weight: 700;
        color: #222;
        width: 5.466667rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin: 0;
      }
      span {
        display: inline-block;
        color: #ff5543;
        font-size: .346667rem;
        padding-top: .266667rem;
      }
    }
    .apply_btn_box {
      width: 1.546667rem;
      height: .666667rem;
      font-size: .346667rem;
      .apply_btn {
        width: 1.546667rem;
        height: .666667rem;
        padding: 0;
        border: 0;
        color: #fff;
        background: linear-gradient(-36deg, #FF1814, #FF7401);
      }
    }
  }
}
</style>